<template>
  <div id="app">
    <div class="select-section">
      <el-select v-model="subject" placeholder="选择学科">
        <el-option label="数学" value="数学"></el-option>
        <el-option label="物理" value="物理"></el-option>
        <el-option label="化学" value="化学"></el-option>
        <el-option label="生物" value="生物"></el-option>
        <el-option label="历史" value="历史"></el-option>
        <el-option label="政治" value="政治"></el-option>
        <el-option label="地理" value="地理"></el-option>
        <el-option label="英语" value="英语"></el-option>
        <el-option label="语文" value="语文"></el-option>
        <!-- 添加更多学科选项 -->
      </el-select>
      <el-select v-model="questionType" placeholder="选择题型">
        <el-option label="填空题" value="填空题"></el-option>
        <el-option label="简答题" value="简答题"></el-option>
        <el-option label="判断题" value="判断题"></el-option>
        <!-- 添加更多题型选项 -->
      </el-select>
      <el-select v-model="grade" placeholder="选择年级">
        <el-option-group label="小学">
          <el-option label="一年级" value="一年级"></el-option>
          <el-option label="二年级" value="二年级"></el-option>
          <el-option label="三年级" value="三年级"></el-option>
          <el-option label="四年级" value="四年级"></el-option>
          <el-option label="五年级" value="五年级"></el-option>
          <el-option label="六年级" value="六年级"></el-option>
        </el-option-group>
        <el-option-group label="初中">
          <el-option label="初一" value="初一"></el-option>
          <el-option label="初二" value="初二"></el-option>
          <el-option label="初三" value="初三"></el-option>
        </el-option-group>
        <el-option-group label="高中">
          <el-option label="高一" value="高一"></el-option>
          <el-option label="高二" value="高二"></el-option>
          <el-option label="高三" value="高三"></el-option>
        </el-option-group>
        <el-option label="大学" value="大学"></el-option>
      </el-select>
      <el-select v-model="degree" placeholder="选择难度">
        <el-option label="简单" value="简单"></el-option>
        <el-option label="中等" value="中等"></el-option>
        <el-option label="困难" value="困难"></el-option>
        <!-- 添加更多题型选项 -->
      </el-select>
      <div class="button-section">
        <el-button type="primary" @click="submitQuestion">出题</el-button>
      </div>
    </div>
    <div class="input-section">
      <el-input
        placeholder="显示问题"
        type="textarea"
        :rows="5"
        v-model="question"
        readonly>
      </el-input>
    </div>
    <div class="button-section">
      <el-button type="primary" @click="showanswer">显示答案</el-button>
    </div>
    <div class="output-section">
      <el-input
        type="textarea"
        :rows="16"
        placeholder="回答内容"
        v-model="answer"
        readonly>
      </el-input>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      degree:"",//难度
      grade:"",//年级
      subject: "", // 学科
      questionType: "", // 题型
      question: "", // 问题
      answer: "", // 答案
      loadingInstance: null // 用于控制加载动画的实例
    }
  },
  methods: {
    submitQuestion() {
      if (this.subject.length === 0 || this.questionType.length === 0||this.grade===0||this.degree===0) {
        this.$message({
          type: 'error',
          message: '请选择学科、题型、年级和难度',
        });
      } else {
        this.answer="";
        // 启动加载动画
        this.loadingInstance = this.$loading({
          lock: true,
          text: '正在出题...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        // 将问题发送到后端
        axios.post('http://localhost:8080/api/issue/showquestion', {
          subject: this.grade+this.subject,
          questionType: this.questionType+this.degree,
        })
          .then(res => {
            if (res.data.code === 200) {
              // 将后端返回的问题填充到相应的文本框

              this.question = res.data.data;
              //console.log(this.question);
              this.$message({
                type: "success",
                message: "问题提交成功"
              });
            } else {
              this.$message({
                type: "error",
                message: "提交失败，请重试"
              });
            }
          })
          .catch(error => {
            this.$message({
              type: "error",
              message: "请求失败，请重试"
            });
          })
          .finally(() => {
            // 关闭加载动画
            this.loadingInstance.close();
          });
      }
    },
    showanswer() {
      if (this.question.length === 0 ) {
        this.$message({
          type: 'error',
          message: '请选择学科和题型',
        });
      } else {
        // 启动加载动画
        this.loadingInstance = this.$loading({
          lock: true,
          text: '正在解题',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        // 将问题发送到后端
        axios.post('http://localhost:8080/api/issue/showanswer', {

          question: this.question
        })
          .then(res => {
            if (res.data.code === 200) {
              // 将后端返回的答案填充到相应的文本框
              this.answer = res.data.data;

              this.$message({
                type: "success",
                message: "问题提交成功"
              });
            } else {
              this.$message({
                type: "error",
                message: "提交失败，请重试"
              });
            }
          })
          .catch(error => {
            this.$message({
              type: "error",
              message: "请求失败，请重试"
            });
          })
          .finally(() => {
            // 关闭加载动画
            this.loadingInstance.close();
          });
      }
    }
  }
}
</script>

<style scoped>
.select-section, .input-section, .button-section, .output-section {
  margin: 20px 0;
}
</style>
